<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>流星雨特效</title>
    <link rel="stylesheet" href="weather.css">
    <script src="meteor.js"></script>
    <style>
        * { padding: 0; margin: 0; outline: none; }
        body,html{ width: 100%; height: 100%; overflow: hidden; }
        body{ background-color: #000; }
    </style>
</head>
<body>
    <canvas id="star"></canvas>
    <div id="weather">
        <div class="curr">
            <span class="addr"></span>
            <div class="info">
                <span class="wendu"></span>
                <span class="air"></span>
                <span class="pm"></span>
            </div>
            <!-- <div class="choose">选择</div> -->
        </div>
        <!-- <div class="choose-layer">
            <ul class="provice">
                <li>北京</li>
                <li>上海</li>
                <li>河南</li>
                <li>湖北</li>
                <li>江苏</li>
            </ul>
            <ul class="city">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div> -->
    </div>
    <script>
        var __jp4 = function (res) {
            const data = res.data
            console.info(data);
            var r = document.getElementById('weather')
            var a = document.querySelector('.addr')
            var w = document.querySelector('.wendu')
            var i = document.querySelector('.air')
            var p = document.querySelector('.pm')
            a.innerText = '上海'
            w.innerText = data.observe.weather + ' '+ data.observe.degree + '°C'
            i.innerText = '空气质量：' + data.air.aqi_name
            p.innerText = 'PM2.5：' + data.air['pm2.5']
        }
    </script>
    <script src="https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc&province=%E4%B8%8A%E6%B5%B7%E5%B8%82&city=%E4%B8%8A%E6%B5%B7%E5%B8%82&callback=__jp4"></script>
</body>
</html>